@import "compass/css3";

body {
  background: #fff4e0;
}

.slide {	
	background: #fff4e0;
	position: relative;
  
  .stage {
    position: relative;
    height: 400px;
    background: #c5e0dc;

    & .landscape {
      background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/landscape.png') no-repeat center top;
      background-size: cover;
      height: 248px;
      position: absolute;
      top: 185px;
      left: 0;
      width: 100%;
      z-index: 3;
    }

    & .behind-trees {
      background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/behind-trees.png') no-repeat center top;
      height: 103px;
      position: absolute;
      top: 120px;
      left: 0;
      width: 100%;
      z-index: 2;  
    }

    & .behind-mountains {
      background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/behind-mountains.png') no-repeat center top;
      height: 103px;
      position: absolute;
      top: 100px;
      left: 0;
      width: 100%;
      z-index: 2; 
    }

    & .foreground-trees {
      background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/foreground-trees.png') no-repeat center top;
      height: 264px;
      position: absolute;
      top: 150px;
      left: 0;
      width: 100%;
      z-index: 4; 
    }
  }
}

.kai {
  height: 257px;
  position: absolute;
  width: 180px;
  left: 50%;
  margin-left: -90px;
  top: 110px;
  z-index: 3;
  transform: scale(0);
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/kai_running.png');
  
  & %eyes {
    height: 8px;
    width: 5px;
    background: #1a181b;
    top: 100px;
    content: "";
    position: absolute;
    display: block;
    border-radius: 50%;
  }
  
  & .eyes {
    &:after {
      @extend %eyes;
      right: 70px;
    }
		
    &:before {
      @extend %eyes;
      left: 70px;
    }
  }
  
  &.animate {
    animation: animate .75s steps(19) infinite;
    
    & .eyes {
      position: relative;
      animation: eyes_running .75s reverse infinite;
    
      &:before, &:after {
        animation: eyes_blink 5s .2s alternate infinite linear;
      }
    }  
  }
}

@keyframes animate {
  to { background-position: -3420px; }
}

@keyframes eyes_blink {
  0% { height: 8px; top: 100px; }
  10% { height: 8px; top: 100px; }
  11% { height: 2px; top: 103px; }
  13% { height: 2px; top: 103px; }
  14% { height: 8px; top: 100px; }
  30% { height: 8px; top: 100px; }
  34% { height: 8px; top: 100px; }
  36% { height: 2px; top: 103px; }
  38% { height: 8px; top: 100px; }
  40% { height: 2px; top: 103px; }
  42% { height: 8px; top: 100px; }
  99.9999% { height: 8px; top: 100px; }
}

@keyframes eyes_running {
  0% { top: 20px; }
  22% { top: 9px; }
  46% { top: 17px; }
  72% { top: 9px; }
  100% { top: 20px; }
}